@import "./reset.scss";
 
@import "./mixin.scss";
@import "./config.scss";
.modal {
    // transition:    all 1s;
    z-index: 10;
    transition: all 0.5s ;
    @include position(fixed);
    
    .mask {
        @include position(fixed);
        background-color:$colorI;
        opacity: 0.5;
    }
    &.slide-enter {
        top:-100%;
    }
    &.slide-enter-active {
        top:-50%;
        transition:    all 1s;
        
    }
     
    
    
    &.slide-enter-to{
        
        top:0;
    }
    &.slide-leave {
        top:0;
    }

    &.slide-leave-active{
        top:-30%;
        transition:   all 1s;
        
    }
    
    &.slide-leave-to{
        top:-100%;
    }

    .modal-dialog {
        @include position(absolute,54%,50%,660px,auto);
        background-color:$colorG;
        transform: translate(-50%,-50%);
        .modal-header {
            height: 60px;
            background-color: $colorJ;
            padding:0 25px ;
            line-height:60px ; 
            font-size: $fontI;
            .icon-close {
                @include positionImg(absolute,23px,25px,14px,14px,'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1413717481,2050112124&fm=26&gp=0.jpg');
                transition: all 0.5s ;
                &:hover {
                    transform:scale(1.5);
                }
            }

        }
        .modal-body {
            padding:42px 40px 54px ;
            font-size: 14px; 

        }
        .modal-footer {
            height: 82px;
            line-height: 82px ;
            text-align: center;  
            background-color: $colorJ; 
        }
    }

}